<template>
  <div class="content" :style="contentStyle">
    <v-touch class="article" v-for="(articleItem,index) in item.articles" :key="index"
      :style="articleStyle(articleItem)" @tap="item.isFinish?null:puzzleIsShow(articleItem)"
      :class="{enlarge:articleItem.isPoint}">
      <img src="https://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/Static-library/assignment/%E9%97%AE%E9%A2%98%E6%8F%90%E7%A4%BA.png"
        class="point" v-if="assignmentArticle === articleItem && !item.isFinish" />
<!--      <Point class="pointTouch" v-if="!item.operated"/>-->
    </v-touch>
    <Puzzle v-if="puzzleShow && !isBreakLos" :assignmentArticle="assignmentArticle" :item="item" :index="index" :isSeedEntery="isSeedEntery"
            :isBreakLos="isBreakLos" @breakLosTouch="breakLosTouch" :questionIndex="questionIndex"/>
  </div>
</template>

<script>
import { mixins } from "@/common/mixins/assignmentMixins.js"
import Puzzle from "./puzzle.vue"
// import Point from "../point.vue";
import {mapActions} from "vuex";
export default {
  mixins: [mixins],
  components: {
    Puzzle,
    // Point
  },
  data() {
    return {
      puzzleShow: false,
      scale: 1
    }
  },
  beforeMount() {
    if (this.index === 0) this.animate()
    if(!this.item.isFinished) this.$set(this.item,'operated',false)
  },
  computed: {
    //触发任务元素
    assignmentArticle() {
      return this.item.articles.filter(item => { return item.name === this.item.assignmentName })[0]
    },
    //元素属性
    articleStyle(item) {
      return function (item) {
        const imageUrl = this.assignmentArticle === item && !this.item.isFinish ? this.item.whiteArticleUrl : item.imageUrl
        return {
          position: "absolute",
          transition: "all .5s",
          background: "url(" + imageUrl + ")0 0/100% 100%",
          width: item.width,
          height: item.height,
          left: item.left,
          top: item.top,
          transform: "scale(" + this.scale + ")"
        }
      }
    },
  },
  methods: {
    puzzleIsShow: function (item) {
      if (item === this.assignmentArticle || !item) {
        this.touchMusic()
        this.updateOperated({questionIndex:this.questionIndex,param:this.index})
        this.puzzleShow = !this.puzzleShow
        this.$parent.$parent.$parent.$refs.content.style.zIndex = this.puzzleShow ? 100 : 99
      }
    },
    animate: function () {
      this.$set(this.assignmentArticle, "isPoint", true)
      setTimeout(() => { this.$set(this.assignmentArticle, "isPoint", false) }, 4500)
    },
    ...mapActions("assignmentStatus", ["updateOperated"])
  },
  watch: {
    activeIndex: function (activeIndex) {
      if (this.index === activeIndex && !this.item.isFinish) {
        this.animate()
      }
    }
  }
}
</script>

<style scoped lang='stylus'>
@import '../../../common/stylus/content.styl'
.point
  position absolute
  left 50%
  top 50%
  max-width 30%
  max-height 30%
  margin-left -15%
  margin-top -15%
.pointTouch
  animation scaleBig 1s infinite
</style>
